<template>
	<view class="body">
		<!-- 页面标题 -->
		<view class="my">
			<view class="heade">
				<span class="wodespan">我的</span>
			</view>
			<view class="headeimg">
				<image class="headeimg2" src="../../static/icon_chilun.png" @click="goToShezhi"></image>
				<image class="headeimg3" src="../../static/icon_tishi.png" @click="goToWodexiaoxi"></image>
			</view>
		</view>

		<!-- 用户头像部分 -->
		<view class="yonghu">
			<!-- 用户头像 -->
			<view class="image1" @click="goToWodeziliao">
				<image class="img1" src="../../static/logo.png"></image>
			</view>

			<view class="yonghutext">
				<!-- 账号 -->
				<view class="text1" @click="goToWodeziliao">13083936558</view>
				<!-- 会员等级 -->
				<view class="image2">
					<image class="img2" src="../../static/vip0.png"></image>
				</view>
			</view>
			<!-- 顶部返回箭头 -->
			<view class="icon">
				<view class="image3" @click="goToWodeziliao">
					<image class="img3" src="../../static/icon_jiantou.png"></image>
				</view>
			</view>
		</view>
		<!-- 我的钱包部分 -->
		<view class="qianbao">
			<image class="qianbaoimg" src="../../static/myqb.png"></image>
			<view class="qb1">

				<viwe class="wodeqianbao">我的钱包</viwe>
				<view class="jiaoyimingxi" @click="goToJiaoyimingxi">交易明细</view>
				<!-- 交易明细返回箭头 -->
				<view class="icon2">
					<view class="image4" @click="goToJiaoyimingxi">
						<image class="img4" src="../../static/icon_baijiantou.png"></image>
					</view>
				</view>
			</view>

			<view class="qb2">
				<view class="textbox">
					<view class="text2">0.00</view>
					<view class="text3">账户余额 (元)</view>
				</view>
				<view class="qbxian"></view>
				<view class="textbox">
					<view class="text2">0</view>
					<view class="text3">今日中奖 (元)</view>
				</view>
			</view>

			<view class="qb3">
				<view class="qbbox3" @click="goToChongzhi">充值</view>
				<view class="qbbox3" @click="goToZhuanzhang">转账</view>
				<view class="qbbox3" @click="goToTikuan">提款</view>
			</view>
		</view>


		<view class="jilu">
			<view class="jilu1">
				<view class="xt"></view>
				<view class="tzjl">投注记录</view>
				<view class="qbjl" @click="goToJilu">全部记录</view>
				<view class="icon3">
					<view class="image5" @click="goToJilu">
						<image class="img5" src="../../static/icon_jiantou.png"></image>
					</view>
				</view>
			</view>
			<!-- 投注记录部分 -->
			<view class="jilu2">
				<view class="jilutextbox"  @click="goToJilu">
					<view class="text4">0</view>
					<view class="text5">待出票</view>
				</view>
				<view class="jilutextbox"  @click="goToJilu">
					<view class="text4">0</view>
					<view class="text5">待开奖</view>
				</view>
				<view class="jilutextbox"  @click="goToJilu">
					<view class="text4">0</view>
					<view class="text5">已中奖</view>
				</view>
			</view>
		</view>

		<!-- 更多服务页面 -->
		<view class="fuwu">
			<view class="fuwutextbox">
				<view class="xt"></view>
				<view class="gdfw">更多服务</view>
			</view>
			<view class="fuwubox">
				<view class="box" @click="goToHemai">
					<view class="image6">
						<image class="img6" src="../../static/hmjl.png"></image>
					</view>
					<view class="text6">合买记录</view>
				</view>
				<view class="box" @click="goToZhuihao">
					<view class="image6" >
						<image class="img6" src="../../static/zhjl.png"></image>
					</view>
					<view class="text6">追号记录</view>
				</view>
				<view class="box" @click="goToBaocunjilu">
					<view class="image6">
						<image class="img6" src="../../static/bcjl.png"></image>
					</view>
					<view class="text6">保存记录</view>
				</view>
				<view class="box" @click="goToDianpuxinxi">
					<view class="image6">
						<image class="img6" src="../../static/dpxx.png"></image>
					</view>
					<view class="text6">店铺信息</view>
				</view>
				<view class="box" @click="goToWodehongbao">
					<view class="image6">
						<image class="img6" src="../../static/wdhb.png"></image>
					</view>
					<view class="text6">我的红包</view>
				</view>
				<view class="box" @click="goToTuisongshezhi">
					<view class="image6">
						<image class="img6" src="../../static/tsjl.png"></image>
					</view>
					<view class="text6">推送设置</view>
				</view>
				<view class="box" @click="goToZhanghaoguanli">
					<view class="image6">
						<image class="img6" src="../../static/zhgl.png"></image>
					</view>
					<view class="text6">账号管理</view>
				</view>
				<view class="box">
					<view class="image6" @click="goToBangzhuzhongxin">
						<image class="img6" src="../../static/bzzx.png"></image>
					</view>
					<view class="text6">帮助中心</view>
				</view>
				<view class="box" @click="goToYijianfankui">
					<view class="image6">
						<image class="img6" src="../../static/yjfk.png"></image>
					</view>
					<view class="text6">意见反馈</view>
				</view>

			</view>
		</view>


	</view>

</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			goToShezhi() {
				// 使用uni-app的navigateTo方法跳转
				uni.navigateTo({
					url: '/pages/shezhi/shezhi'
				});
			},
			goToWodexiaoxi() {
				// 使用uni-app的navigateTo方法跳转
				uni.navigateTo({
					url: '/pages/wodexiaoxi/wodexiaoxi'
				});
			},
			goToWodeziliao() {
				// 使用uni-app的navigateTo方法跳转
				uni.navigateTo({
					url: '/pages/wodeziliao/wodeziliao'
				});
			},
			goToJiaoyimingxi() {
				// 使用uni-app的navigateTo方法跳转
				uni.navigateTo({
					url: '/pages/jiaoyimingxi/jiaoyimingxi'
				});
			},
			goToChongzhi() {
				// 使用uni-app的navigateTo方法跳转
				uni.navigateTo({
					url: '/pages/chongzhiyemian/chongzhiyemian'
				});
			},
			goToZhuanzhang() {
				// 使用uni-app的navigateTo方法跳转
				uni.navigateTo({
					url: '/pages/zhuanzhangpage/zhuanzhangpage'
				});
			},
			goToTikuan() {
				// 使用uni-app的navigateTo方法跳转
				uni.navigateTo({
					url: '/pages/tikuanpage/tikuanpage'
				});
			},
			goToJilu() {
				// 使用uni-app的navigateTo方法跳转
				uni.navigateTo({
					url: '/pages/touzhujilu/touzhujilu'
				});
			},
			goToHemai() {
				// 使用uni-app的navigateTo方法跳转
				uni.navigateTo({
					url: '/pages/hemaijilu/hemaijilu'
				});
			},
			goToZhuihao() {
				// 使用uni-app的navigateTo方法跳转
				uni.navigateTo({
					url: '/pages/zhuihaojilu/zhuihaojilu'
				});
			},
			goToBaocunjilu() {
				// 使用uni-app的navigateTo方法跳转
				uni.navigateTo({
					url: '/pages/baocunjilu/baocunjilu'
				});
			},
			goToDianpuxinxi() {
				// 使用uni-app的navigateTo方法跳转
				uni.navigateTo({
					url: '/pages/dianpuxinxi/dianpuxinxi'
				});
			},
			goToWodehongbao() {
				// 使用uni-app的navigateTo方法跳转
				uni.navigateTo({
					url: '/pages/wodehongbao/wodehongbao'
				});
			},
			goToTuisongshezhi() {
				// 使用uni-app的navigateTo方法跳转
				uni.navigateTo({
					url: '/pages/tuisongshezhi/tuisongshezhi'
				});
			},
			goToZhanghaoguanli() {
				// 使用uni-app的navigateTo方法跳转
				uni.navigateTo({
					url: '/pages/zhanghaoguanli/zhanghaoguanli'
				});
			},
			goToBangzhuzhongxin() {
				// 使用uni-app的navigateTo方法跳转
				uni.navigateTo({
					url: '/pages/bangzhuzhongxin/bangzhuzhongxin'
				});
			},
			goToYijianfankui() {
				// 使用uni-app的navigateTo方法跳转
				uni.navigateTo({
					url: '/pages/yijianfankui/yijianfankui'
				});
			},
		}
	}
</script>

<style>
	.body {
		background-color: #eeeeee;
	}

	/* 页面标题样式 */

	.heade {
		position: relative;
		top: 20px;
	}

	.wodespan {
		left: 48%;
		position: relative;
		font-size: 18px;
		font-weight: 800;
		color: rgb(17, 17, 17);
		line-height: 18px;
	}

	.headeimg {
		width: 100px;
		/* height: 16px; */
		position: relative;
		/* bottom: 20px; */
		left: 76%;
		display: flex;
	}

	.headeimg2 {
		width: 22px;
		height: 22px;
		position: relative;
		left: 15px;
	}

	.headeimg3 {
		width: 22px;
		height: 22px;
		position: relative;
		/* 		    background-size: 100% 100%; */
		left: 30px;
	}

	/* 用户头像样式 */

	.yonghu {
		display: flex;
		/* 		background: pink; */
		width: 91%;
		margin: 0 auto;
		padding: 2%;
	}

	.image1 {
		width: 14%;
		margin-right: 3%;
	}

	.img1 {
		width: 100%;
		height: 93rpx;
		border-radius: 50rpx;
	}

	/* 	.image2 {
		width: 20%;
	} */

	.img2 {
		margin-top: 5px;
		width: 63px;
		height: 23px;
	}

	/* 	.icon {
		width: 10%;
		margin: auto;
	}
	
	.image3 {
		width: 80%;
	}
	 */
	.img3 {
		/* 		width: 100%;
		height: 25rpx; */
		width: 20px;
		height: 20px;
		position: relative;
		top: 14px;
	}

	.yonghutext {
		width: 80%;
	}

	/* 钱包样式 */

	.qianbao {
		/* width: 84%;
		margin: 0 auto;
		background: beige;
		padding: 2%; */
		margin: 0 15px;
		position: relative;
		background: linear-gradient(90deg, rgba(226, 50, 52, .5), #e23234);
		box-shadow: inset 0px 1px 7px 0px hsla(0, 0%, 100%, .5);
		border-radius: 14px 14px 0 0;
	}

	.qb1 {
		/* display: flex;
		padding-bottom: 2%; */
		position: absolute;
		top: 10px;
		/* width: 100%; */
		display: flex;
		justify-content: space-between;
		align-items: center;
		line-height: 26px;
		padding: 0 12px;
		width: 93%;
	}

	.qianbaoimg {
		width: 84px;
		height: 32px;
		position: absolute;
		top: 10px;
		left: -6px;
	}

	.wodeqianbao {
		font-size: 15px;
		font-weight: 400;
		color: #e23234;
		padding-right: 50%;
	}

	.wdqb {
		width: 30%;
		padding-right: 135px;
	}

	.jiaoyimingxi {
		font-size: 15px;
		color: #fff;
	}

	/* 	.icon2 {
		width: 10%;
	}

	.image4 {
		width: 100%;

	} */

	.img4 {
		/* width: 100%;
		height: 25rpx; */
		width: 14px;
		height: 14px;
		margin-left: 1%;
	}

	.qb2 {
		/* width: 98%;
		display: flex;
		padding: 2%; */
		display: flex;
		justify-content: center;
		padding: 60px 45px 0px;
	}

	.qbxian {
		width: 1px;
		height: 42px;
		opacity: 0.4;
		background-color: white;
		position: relative;
		left: 5px;
	}

	.textbox {
		/* width: 45%;
		text-align: center;
		margin: 0 auto; */
		width: 127px;
		color: #fff;
		position: relative;
		bottom: 12px;
		text-align: center;
	}

	.text2 {
		font-size: 24px;
		/* padding-bottom: 5px; */
		padding-bottom: 14px;
	}

	.text3 {
		font-size: 12px;
		/* font-family: PingFangSC-Regular, PingFang SC; */
		/* font-weight: 400; */
		color: #fff;
		/* line-height: 17px; */
		position: relative;
		bottom: 5px;
		text-align: center;
	}

	.qb3 {
		/* width: 98%;
		display: flex;
		padding: 2%; */

		/* border-bottom-left-radius: 8px; */
		/* border-bottom-right-radius: 8px; */
		padding: 16px 16px;
		height: 30px;
		display: flex;
	}

	.qbbox3 {
		margin-left: 8px;
		font-size: 14px;
		/* font-family: PingFangSC-Medium, PingFang SC; */
		font-weight: 800;
		color: #e23234;
		line-height: 34px;
		text-align: center;

		width: 31%;
		height: 34px;
		background: linear-gradient(180deg, #fff, #ffdbd4);
		box-shadow: inset 0px 3px 5px 0px #fff;
		border-radius: 4px;
		border-image: linear-gradient(180deg, #fff, hsla(0, 0%, 100%, 0)) 2 2;

		margin: 0 auto;
	}


	/* 投注记录部分样式 */

	.jilu {
		width: 96%;
		margin: 0 auto;
		padding: 2%;
		background: white;
		/* 		height: 160rpx; */
		margin-bottom: 38rpx;
	}

	.jilu1 {
		display: flex;
		padding: 1%;
	}

	.tzjl {
		width: 40%;
		font-size: 17px;
		font-weight: 800;
		color: #000;
		/* margin-right: 40%; */
		padding-right: 30%;
	}

	.qbjl {
		width: 20%;
		font-size: 13px;
		/* font-family: PingFangSC-Regular, PingFang SC; */
		font-weight: 400;
		color: #666;
	}

	.icon3 {
		width: 10%;
	}

	.image5 {
		width: 100%;
		height: 35rpx;
	}

	.img5 {
		width: 14px;
		height: 14px;
	}

	.jilu2 {
		width: 100%;
		display: flex;
	}

	.jilutextbox {
		width: 30%;
		margin: 3% auto;
		text-align: center;
	}

	.text4 {
		font-size: 45rpx;
		color: red;
		margin-bottom: 7px;
	}

	.text5 {
		font-size: 33rpx;
		color: black;
	}

	.xt {
		width: 5px;
		height: 21px;
		background: rgb(226, 50, 52);
		border-radius: 2px;
		margin-right: 3px;
	}


	/* 更多服务样式 */
	.fuwu {
		width: 96%;
		margin: 0 auto;
		padding: 2%;
		background: white;
	}

	.gdfw {
		font-size: 17px;
		font-weight: 800;
		color: rgb(0, 0, 0);
	}

	.fuwubox {
		display: flex;
		flex-wrap: wrap;
		/* 空间不够自动换行 */
		padding: 0 16px 16px;
	}

	.box {
		margin-top: 16px;
		width: 25%;
		text-align: center;
	}

	.image6 {
		width: 35%;
		margin: 0 auto;
	}

	.img6 {
		width: 100%;
		height: 60rpx;
	}

	.text6 {

		color: #303133;
		font-size: 28rpx;
	}

	.tx {
		width: 5px;
		height: 18px;
		background: rgb(226, 50, 52);
		border-radius: 2px;
		margin-right: 3px;
	}

	.fuwutextbox {
		display: flex;
		padding: 1%;
	}
</style>
